// Copyright 2018 Superblocks AB
//
// This file is part of Superblocks Lab.
//
// Superblocks Lab is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation version 3 of the License.
//
// Superblocks Lab is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Superblocks Lab.  If not, see <http://www.gnu.org/licenses/>.

.main {
    background-color: #1e1e1e;
    width: 100%;
    height: 100%;
    color: #eee;
    .inner {
        padding: 16px 10px 80px 50px;
    }
    .title {
        font-weight: 700;
    }
    .form {
        display: inline-block;
        width: 100%;
        margin: 10px auto;
        .field {
            display: block;
            button {
                margin-top: 12px;
            }
        }
        .arguments {
            select, input {
                display: inline-block;
                width: auto;
                min-width: 100px;
                margin-right: 5px;
            }

        }
        .networkContainer {
            margin-top: 40px;

            .titleContainer {
                display: flex;
                margin: 10px 0;
                align-content: center;
                align-items: center;
                .title {
                    margin-right: 10px;
                }
            }
            .subtitle {
                a {
                    color: #8641F2;
                }
            }
            .networkHeader {
                margin-top: 50px;
                margin-bottom: 20px;
            }
            .networkSelector {
                display: flex;
                margin-top: 40px;
                .networks {
                    width: 20%;
                    border-right: 1px solid #565656;
                    max-width: 300px;
                    p {
                        display: block;

                    }
                    a {
                        color: #333;
                        font-size: 1.2em;
                    }
                    ul {
                        list-style: none;
                        margin: 0;
                        padding: 0;
                        color: #b1b1b1;
                        li {
                            line-height: 40px;
                            border-left: 2px solid;
                            border-color: transparent;
                            &:hover {
                                background-color: rgba(128, 46, 255, 0.22);
                                cursor: pointer;
                                color: #fff;
                                border-color: #7237CF;
                            }
                            .networkName {
                                padding: 0 16px;
                            }
                        }
                        .active {
                            background-color: rgba(128, 46, 255, 0.32);
                            color: #fff;
                            border-color: #8641F2;
                        }
                    }
                }
                .networkInfo {
                    width: 80%;
                    margin-left: 40px;
                }
            }
        }
    }
}
